<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>消息 - {$site.shop_title}</title>
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="/assets/shop/dist/bui/css/bui.css" />
    <link rel="stylesheet" href="/assets/shop/css/base.css" />
    <link rel="stylesheet" href="/assets/shop/css/user-index.css" />

    <style>
        .weidu{
            background: #ff6057;
            color: #fff;
            padding: 2px 5px;
            font-size: .2rem;
            margin-right: 5px;
            border-radius: 3px;
        }

        .yidu{
            background: #43c702;
            color: #fff;
            padding: 2px 5px;
            font-size: .2rem;
            margin-right: 5px;
            border-radius: 3px;
        }

    </style>

</head>

<body>

<div class="bui-page bui-box-vertical">
    <header>
        <div class="bui-bar">
            <div class="bui-bar-left"></div>
            <div class="bui-bar-main">消息</div>
            <div class="bui-bar-right"></div>
        </div>
    </header>
    <main>

        <div id="scrollList" class="bui-scroll">
            <div class="bui-scroll-head"></div>
            <div class="bui-scroll-main">
                <ul class="bui-list bui-list-thumbnail">
                </ul>
            </div>
            <div class="bui-scroll-foot"></div>
        </div>

        <!--<ul class="bui-list">
            <li class="bui-btn">
                <h3 class="item-title"><span class="weidu">未读</span>系统向您发放400碳币</h3>
                <p class="item-text">2018-02-02 15:04</p>
            </li>
            <li class="bui-btn">
                <h3 class="item-title"><span class="weidu">未读</span>系统向您发放400碳币</h3>
                <p class="item-text">2018-02-02 15:04</p>
            </li>
            <li class="bui-btn">
                <h3 class="item-title"><span class="yidu">已读</span>系统向您发放400碳币</h3>
                <p class="item-text">2018-02-02 15:04</p>
            </li>
        </ul>-->

    </main>
    <footer>
        {include file="common/footer" /}
    </footer>
</div>
<script src="/assets/shop/dist/bui/js/zepto.js"></script>
<script src="/assets/shop/dist/bui/js/bui.js"></script>
<script src="/assets/shop/js/base.js"></script>
<script>

    var uiList = bui.list({
        id: "#scrollList",
        url: "{:url('notice/index')}",
        pageSize: 10, // 当pageSize 小于返回的数据大小的时候,则认为是最后一页,接口返回的数据最好能返回空数组,而不是null
        data: {},
        //如果分页的字段名不一样,通过field重新定义
        field: {
            page: "page",
            size: "pageSize",
            data: "data"
        },
        callback: function(e) {
            var id = e.currentTarget.getAttribute('data-id');
            location.href = "/shop/notice/detail/id/" + id;
            // e.target 为你当前点击的元素
            // e.currentTarget 为你当前点击的handle 整行
        },
        template: function(data) {
            var html = "";
            data.forEach(function(el, index) {
                html += `<li class="bui-btn" data-id="${el.id}">
                            <h3 class="item-title"><span class="${el.class}">${el.status}</span>${el.title}</h3>
                            <p class="item-text">2018-02-02 15:04</p>
                         </li>`
            });

            return html;
        },
        onBeforeRefresh: function() {
            //刷新前
            console.log("开始刷新")
        },

        onBeforeLoad: function() {
            //加载前
            console.log("开始加载")
        },
        onRefresh: function() {
            // 刷新后执行
            console.log("刷新完成")
        },
        onLoad: function() {
            // 加载后执行
            console.log("加载完成")
        }
    })



</script>
</body>

</html>